<template>
  <div>
    <h1>App{{ count }}</h1>
    <button @click="count++">count累加</button>
    <button @click="show = !show">控制Header的显示和消失</button>
    <hr />
    <Header v-if="show" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script setup lang="ts">
import Header from "./components/Header.vue";
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from "vue";
const count = ref(1);
const show = ref(true);

onBeforeMount(() => {
  console.log("1--初始化之前");
});
onMounted(() => {
  console.log("2--初始化之后");
});
onBeforeUpdate(() => {
  console.log("3--更新前");
});
onUpdated(() => {
  console.log("4--更新后");
});
</script>

<style  scoped >
</style>